<template>
  <el-dialog
    :title="title"
    :visible="visible"
    width="700px"
    :before-close="closeForm"
    :close-on-click-modal="false"
  >
    <el-form ref="controlEdit" :model="phyGroup" :rules="rules" label-width="120px">
      <el-form-item label="系统类别" prop="SysTypeVal">
        <el-cascader
          v-model="phyGroup.SysTypeVal"
          :options="groups"
          placeholder="系统类别"
          :props="groupProps"
          :clearable="true"
          style="min-width: 200px"
          class="el-input"
          @change="groupChange"
        />
      </el-form-item>
      <el-form-item label="组名" prop="GroupName">
        <el-input v-model="phyGroup.GroupName" maxlength="50" placeholder="组名" />
      </el-form-item>
      <el-form-item label="组说明" prop="Show">
        <el-input
          v-model="phyGroup.Show"
          maxlength="100"
          placeholder="组说明"
        />
      </el-form-item>
      <el-form-item label="是否启用" prop="IsEnable">
        <el-switch
          v-model="phyGroup.IsEnable"
          active-text="启用"
          inactive-text="停用"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" style="text-align: center">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="reset">重置</el-button>
    </div>
  </el-dialog>
</template>

<script>
import * as phyGroupApi from '@/customForm/api/phyGroup'
import { GetSysGroup } from '@/customForm/api/sysGroup'
export default {
  components: {
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      groups: [],
      phyGroup: {
        GroupName: null,
        Show: null,
        SysTypeVal: null,
        IsEnable: false
      },
      groupCache: {},
      title: '新增服务组',
      groupProps: {
        multiple: false,
        emitPath: false,
        checkStrictly: true,
        value: 'value',
        label: 'text',
        children: 'Children'
      },
      rules: {
        SysTypeId: [
          {
            required: true,
            message: '选择系统类型',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {},
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.reset()
          if (this.groups.length === 0) {
            this.loadGroups()
          }
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    groupChange(e) {
      const type = this.groupCache[this.phyGroup.SysTypeVal]
      this.phyGroup.GroupName = type.SystemName
    },
    async loadGroups() {
      const list = await GetSysGroup()
      const data = []
      this.groupCache = {}
      list.forEach(c => {
        const t = {
          text: c.GroupName,
          value: c.TypeVal,
          Children: c.ServerType.map(a => {
            this.groupCache[a.TypeVal] = a
            return {
              text: a.SystemName,
              value: a.TypeVal
            }
          })
        }
        data.push(t)
      })
      this.groups = data
    },
    async reset() {
      if (this.id != null) {
        const res = await phyGroupApi.Get(this.id)
        this.phyGroup = res
      } else {
        this.phyGroup = {
          GroupName: null,
          Show: null,
          SysTypeVal: null,
          IsEnable: false
        }
      }
    },
    async add() {
      await phyGroupApi.Add(this.phyGroup)
      this.$message({
        message: '更新成功!',
        type: 'success'
      })
      this.$emit('update:visible', false)
      this.$emit('close', true)
    },
    async set() {
      await phyGroupApi.Set(this.id, {
        GroupName: this.phyGroup.GroupName,
        Show: this.phyGroup.Show,
        SysTypeVal: this.phyGroup.SysTypeVal,
        IsEnable: this.phyGroup.IsEnable
      })
      this.$message({
        message: '更新成功!',
        type: 'success'
      })
      this.$emit('update:visible', false)
      this.$emit('close', true)
    },
    save() {
      this.$refs['controlEdit'].validate((valid) => {
        if (valid) {
          if (this.id != null) {
            this.set()
          } else {
            this.add()
          }
        } else {
          return false
        }
      })
    },
    closeForm() {
      this.$emit('update:visible', false)
    }
  }
}
</script>
